<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="UTF-8">
    <title>绑定用户</title>
    <script src="https://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
</head>
<body>


<fieldset>
    <legend>绑定用户</legend>
    <div>
        <div>
            <label for="username">第三方网站:</label>
            <span id="loginType" th:text="${loginType}"></span>
            <label for="username">第三方用户ID:</label>
            <span id="userId" th:text="${data.userId}"></span>
            <label for="username">第三方用户:</label>
            <span id="userName2" th:text="${data.userName}"></span>
            <label for="username">第三方用户:</label>
            <span id="nickName" th:text="${data.nickName}"></span>
        </div>
        <label for="username">用户名:</label>
        <input type="text" id="username">

        <label for="username">密码:</label>
        <input type="text" id="password">

        <button id="login" onClick="bind()">登录并绑定</button>

    </div>
</fieldset>


</body>

<script>
    function bind() {

        let url = "/bind-user-self?username=" + $('[id=username]').val() + "&password=" + $('[id=password]').val();
        //从地址栏获取参数 token
        let token = location.search.substr(1).split("=")[1];
        url = url + "&token=" + token;
        let thrid = {
            thridType: $('[id=loginType]').text(),
            userId: $('[id=userId]').text(),
            userName: $('[id=userName2]').text(),
            nickName: $('[id=nickName]').text(),
        }
        $.ajax({
            url: url,
            data: JSON.stringify(thrid),
            type: 'post',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (res) {
                console.log('返回：', res);
                if (res.code == 200) {
                    layer.msg('登录成功！');
                    window.location.href = "/";
                } else {
                    layer.msg(res.msg);
                }
            },
            error: function (xhr, type, errorThrown) {
                return layer.alert("异常：" + JSON.stringify(xhr));
            }
        });
    }
</script>

<style>
    fieldset {
        border-style: solid;
        border-width: 1px;
        border-color: #7a7a7a;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        line-height: 30px;
        list-style: none;
        margin-left: 10px;
        margin-right: 10px;
    }

    fieldset legend {

        color: #302A2A;
        font: bold 14px Verdana, Geneva, sans-serif;
        font-weight: bold;
        text-align: left;
    }
</style>
</html>